import {
  Avatar,
  Button,
  Col,
  Form,
  Image,
  Input,
  Modal,
  Row,
  Space,
  Upload,
} from "antd";
import { FormDialogProps } from "../../../Types/FormDialogProps";
import { SoapOpera } from "../../../Types/SoapOpera";
import { useEffect, useState } from "react";
import { UploadChangeParam, UploadFile } from "antd/es/upload";
import {
  createSoapOpera,
  updateSoapOpera,
  uploadSoapOperaCover,
} from "../../../api/soapOperaManage";

export function SoapOperaEditFormDialog(props: FormDialogProps<SoapOpera>) {
  const [form] = Form.useForm();
  function onOk() {
    if (props.detail?.id) {
      updateSoapOpera({
        id: props.detail.id,
        ...form.getFieldsValue(),
      }).then(() => {
        if (props.onOk) {
          props.onOk();
        }
      });
    } else {
      createSoapOpera(form.getFieldsValue()).then(() => {
        if (props.onOk) {
          props.onOk();
        }
      });
    }
  }

  const [tempCover, setTempCover] = useState<string>(); //临时保存封面图片
  function onUploadChange(info: UploadChangeParam<UploadFile>) {
    console.log("🚀 ~ onUploadChange ~ info:", info);
    uploadSoapOperaCover(info.file).then((res) => {
      setTempCover(res.data);
      form.setFieldValue("cover", res.data);
    });
  }

  useEffect(() => {
    form.resetFields();
    setTempCover("");

    if (props.detail) {
      form.setFieldsValue(props.detail);
      setTempCover(props.detail.cover);
    } else {
      form.setFieldsValue({});
      setTempCover(undefined);
    }
  }, [form, props.detail, props.open]);
  return (
    <Modal
      open={props.open}
      title={props.title}
      onOk={onOk}
      onCancel={props.onCancel}
    >
      <Form form={form}>
        <Row gutter={16}>
          <Col>
            <Space>
              <Form.Item<SoapOpera> name="cover">
                <Upload
                  listType="picture-card"
                  beforeUpload={() => {
                    return false;
                  }}
                  showUploadList={false}
                  onChange={onUploadChange}
                  className="avatar-uploader_component"
                >
                  <Image
                    preview={false}
                    src={tempCover}
                    fallback=""
                  ></Image>
                </Upload>
              </Form.Item>
            </Space>
          </Col>
          <Col flex={1}>
            <Form.Item<SoapOpera> name="title">
              <Input type="text" placeholder="请输入剧名" />
            </Form.Item>
            <Form.Item<SoapOpera> name="episodes">
              <Input type="text" placeholder="请输入集数" />
            </Form.Item>
            <Form.Item<SoapOpera> name="type">
              <Input type="text" placeholder="请输入类型" />
            </Form.Item>
            <Form.Item<SoapOpera> name="year">
              <Input type="text" placeholder="请输入年份" />
            </Form.Item>
            <Form.Item<SoapOpera> name="rating">
              <Input type="text" placeholder="请输入评分"></Input>
            </Form.Item>
          </Col>
        </Row>

        <Form.Item<SoapOpera> name="director">
          <Input type="text" placeholder="请输入导演" />
        </Form.Item>
        <Form.Item<SoapOpera> name="description">
          <Input type="text" placeholder="请输入简介" />
        </Form.Item>
      </Form>
    </Modal>
  );
}
